<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本统计</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: #ffffff;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(40, 40, 40, 0.9);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .title {
            font-size: 2.5rem;
            font-weight: 300;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .subtitle {
            color: #aaa;
            font-size: 1.1rem;
            font-weight: 300;
        }

        .input-section {
            margin-bottom: 40px;
        }

        .textarea-wrapper {
            position: relative;
            margin-bottom: 20px;
        }

        .text-input {
            width: 100%;
            min-height: 300px;
            padding: 20px;
            background: rgba(20, 20, 20, 0.8);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            color: #ffffff;
            font-size: 16px;
            line-height: 1.6;
            resize: vertical;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .text-input:focus {
            outline: none;
            border-color: #4facfe;
            box-shadow: 0 0 20px rgba(79, 172, 254, 0.3);
        }

        .text-input::placeholder {
            color: #666;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
            border: 1px solid rgba(79, 172, 254, 0.3);
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.5s;
        }

        .stat-card:hover::before {
            left: 100%;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(79, 172, 254, 0.2);
        }

        .stat-label {
            font-size: 0.9rem;
            color: #aaa;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: 600;
            color: #4facfe;
            text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
        }

        .advanced-stats {
            margin-top: 30px;
            padding: 30px;
            background: rgba(20, 20, 20, 0.5);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .advanced-title {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: #4facfe;
            text-align: center;
        }

        .advanced-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
        }

        .advanced-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background: rgba(40, 40, 40, 0.5);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .advanced-label {
            color: #ccc;
            font-size: 0.9rem;
        }

        .advanced-value {
            color: #4facfe;
            font-weight: 600;
        }

        .tools-section {
            margin-top: 30px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .tool-btn {
            padding: 12px 24px;
            background: linear-gradient(45deg, #4facfe, #00f2fe);
            border: none;
            border-radius: 25px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
        }

        .tool-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(79, 172, 254, 0.4);
        }

        .tool-btn:active {
            transform: translateY(0);
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
                margin: 10px;
            }
            
            .title {
                font-size: 2rem;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .advanced-grid {
                grid-template-columns: 1fr;
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container fade-in">
        <div class="header">
            <h1 class="title">文本统计</h1>
            <p class="subtitle">获取有关文本、字符数、字数、大小等的信息</p>
        </div>

        <div class="input-section">
            <div class="textarea-wrapper">
                <textarea 
                    id="textInput" 
                    class="text-input" 
                    placeholder="在此处输入或粘贴您的文本..."
                    oninput="updateStats()"
                >你好</textarea>
            </div>
        </div>

        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-label">Character count</div>
                <div class="stat-value" id="charCount">2</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Word count</div>
                <div class="stat-value" id="wordCount">1</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Line count</div>
                <div class="stat-value" id="lineCount">1</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Byte size</div>
                <div class="stat-value" id="byteSize">6 Bytes</div>
            </div>
        </div>

        <div class="advanced-stats">
            <h3 class="advanced-title">详细统计</h3>
            <div class="advanced-grid">
                <div class="advanced-item">
                    <span class="advanced-label">不含空格字符</span>
                    <span class="advanced-value" id="charNoSpaces">2</span>
                </div>
                <div class="advanced-item">
                    <span class="advanced-label">段落数</span>
                    <span class="advanced-value" id="paragraphCount">1</span>
                </div>
                <div class="advanced-item">
                    <span class="advanced-label">句子数</span>
                    <span class="advanced-value" id="sentenceCount">1</span>
                </div>
                <div class="advanced-item">
                    <span class="advanced-label">平均词长</span>
                    <span class="advanced-value" id="avgWordLength">2.0</span>
                </div>
                <div class="advanced-item">
                    <span class="advanced-label">数字个数</span>
                    <span class="advanced-value" id="numberCount">0</span>
                </div>
                <div class="advanced-item">
                    <span class="advanced-label">中文字符</span>
                    <span class="advanced-value" id="chineseCount">2</span>
                </div>
                <div class="advanced-item">
                    <span class="advanced-label">英文字母</span>
                    <span class="advanced-value" id="englishCount">0</span>
                </div>
                <div class="advanced-item">
                    <span class="advanced-label">标点符号</span>
                    <span class="advanced-value" id="punctuationCount">0</span>
                </div>
            </div>
        </div>

        <div class="tools-section">
            <button class="tool-btn" onclick="clearText()">清空文本</button>
            <button class="tool-btn" onclick="copyStats()">复制统计</button>
            <button class="tool-btn" onclick="loadSample()">载入示例</button>
        </div>
    </div>

    <script>
        function updateStats() {
            const text = document.getElementById('textInput').value;
            
            // 基本统计
            const charCount = text.length;
            const wordCount = text.trim() === '' ? 0 : text.trim().split(/\s+/).filter(word => word.length > 0).length;
            const lineCount = text === '' ? 0 : text.split('\n').length;
            const byteSize = new Blob([text]).size;
            
            // 高级统计
            const charNoSpaces = text.replace(/\s/g, '').length;
            const paragraphCount = text.trim() === '' ? 0 : text.split(/\n\s*\n/).filter(p => p.trim().length > 0).length;
            const sentenceCount = text.trim() === '' ? 0 : text.split(/[。！？!?.]/).filter(s => s.trim().length > 0).length;
            const avgWordLength = wordCount === 0 ? 0 : (charNoSpaces / wordCount).toFixed(1);
            const numberCount = (text.match(/\d/g) || []).length;
            const chineseCount = (text.match(/[\u4e00-\u9fa5]/g) || []).length;
            const englishCount = (text.match(/[a-zA-Z]/g) || []).length;
            const punctuationCount = (text.match(/[，。！？；：""''（）【】《》〈〉、,."'!?;:()\[\]<>]/g) || []).length;
            
            // 更新显示
            document.getElementById('charCount').textContent = charCount.toLocaleString();
            document.getElementById('wordCount').textContent = wordCount.toLocaleString();
            document.getElementById('lineCount').textContent = lineCount.toLocaleString();
            document.getElementById('byteSize').textContent = byteSize.toLocaleString() + ' Bytes';
            
            document.getElementById('charNoSpaces').textContent = charNoSpaces.toLocaleString();
            document.getElementById('paragraphCount').textContent = paragraphCount.toLocaleString();
            document.getElementById('sentenceCount').textContent = sentenceCount.toLocaleString();
            document.getElementById('avgWordLength').textContent = avgWordLength;
            document.getElementById('numberCount').textContent = numberCount.toLocaleString();
            document.getElementById('chineseCount').textContent = chineseCount.toLocaleString();
            document.getElementById('englishCount').textContent = englishCount.toLocaleString();
            document.getElementById('punctuationCount').textContent = punctuationCount.toLocaleString();
        }

        function clearText() {
            document.getElementById('textInput').value = '';
            updateStats();
            document.getElementById('textInput').focus();
        }

        function copyStats() {
            const text = document.getElementById('textInput').value;
            const charCount = text.length;
            const wordCount = text.trim() === '' ? 0 : text.trim().split(/\s+/).filter(word => word.length > 0).length;
            const lineCount = text === '' ? 0 : text.split('\n').length;
            const byteSize = new Blob([text]).size;
            
            const statsText = `文本统计结果：
字符数：${charCount.toLocaleString()}
词数：${wordCount.toLocaleString()}
行数：${lineCount.toLocaleString()}
字节大小：${byteSize.toLocaleString()} Bytes`;
            
            navigator.clipboard.writeText(statsText).then(() => {
                const btn = event.target;
                const originalText = btn.textContent;
                btn.textContent = '已复制！';
                btn.style.background = 'linear-gradient(45deg, #52c41a, #73d13d)';
                setTimeout(() => {
                    btn.textContent = originalText;
                    btn.style.background = 'linear-gradient(45deg, #4facfe, #00f2fe)';
                }, 2000);
            }).catch(() => {
                alert('复制失败，请手动复制统计结果');
            });
        }

        function loadSample() {
            const sampleTexts = [
                `欢迎使用文本统计工具！

这是一个功能强大的文本分析工具，可以帮助您：
- 统计字符数、词数、行数
- 分析中英文字符分布
- 计算文件大小
- 统计标点符号使用情况

Try typing in both Chinese and English to see how the tool handles different languages and character sets. You can also paste long documents here for detailed analysis.

希望这个工具对您有帮助！`,
                
                `Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

这里混合了中文和英文内容，用来测试多语言文本的统计功能。数字123456也会被统计在内。`,
                
                `春江潮水连海平，海上明月共潮生。
滟滟随波千万里，何处春江无月明！

张若虚《春江花月夜》
这是一首描写春江月夜美景的经典诗词。`
            ];
            
            const randomSample = sampleTexts[Math.floor(Math.random() * sampleTexts.length)];
            document.getElementById('textInput').value = randomSample;
            updateStats();
        }

        // 实时更新统计
        document.getElementById('textInput').addEventListener('input', updateStats);
        document.getElementById('textInput').addEventListener('paste', () => {
            setTimeout(updateStats, 10);
        });

        // 页面加载时初始化
        window.addEventListener('load', () => {
            updateStats();
            document.getElementById('textInput').focus();
        });

        // 添加快捷键支持
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey || e.metaKey) {
                switch(e.key) {
                    case 'l':
                        e.preventDefault();
                        clearText();
                        break;
                    case 'k':
                        e.preventDefault();
                        copyStats();
                        break;
                }
            }
        });
    </script>
</body>
</html>